<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="110px" label-suffix=":" class="expert-class" v-loading="loading">
            <el-form-item label="店铺" prop="shop_id">
                <el-select v-model="model.shop_id" placeholder="请选择" clearable>
                    <el-option v-for="item in shopList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="handle" prop="expert_id">
                <el-select v-model="model.expert_id" placeholder="请选择" filterable clearable>
                    <el-option v-for="(item, index) in expertList" :key="index" :label="item.expert_name" :value="item.expert_id"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单编号" prop="order_id">
                <el-input v-model.trim="model.order_id" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="建联人" prop="fb_admin_id">
                <SelectPage
                    v-model="model.fb_admin_id"
                    placeholder="请选择建联人"
                    :url="$api.purchase.getPurchaserList"
                    show_field="username"
                    show_id="operater_id"
                    query_field="keyword"
                    filterable
                    clearable
                    popper-class="custom-select"
                ></SelectPage>
            </el-form-item>
            <el-form-item label="达人主页" prop="link">
                <el-input v-model.trim="model.link" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="spu" prop="spu">
                <el-input v-model.trim="model.spu" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="sku" prop="sku">
                <el-input v-model.trim="model.sku" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="物流商名称" prop="track_name">
                <el-input v-model.trim="model.track_name" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="物流单号" prop="track_number">
                <el-input v-model.trim="model.track_number" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="物流状态" prop="fulfillment_status">
                <el-select v-model="model.fulfillment_status" placeholder="请选择" clearable>
                    <el-option v-for="item in LOGISTICS_STATUS" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户名字" prop="customer_name">
                <el-input v-model.trim="model.customer_name" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model.trim="model.email" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="单号号码" prop="phone">
                <el-input v-model.trim="model.phone" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="国家" prop="country">
                <el-input v-model.trim="model.country" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="省份" prop="province">
                <el-input v-model.trim="model.province" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="城市" prop="city">
                <el-input v-model.trim="model.city" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="邮编" prop="zip">
                <el-input v-model.trim="model.zip" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model.trim="model.address" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="发布日期" prop="publish_time">
                <el-date-picker v-model="model.publish_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable> </el-date-picker>
            </el-form-item>
            <el-form-item label="合作时间" prop="cooperate_time">
                <el-date-picker v-model="model.cooperate_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable> </el-date-picker>
            </el-form-item>
            <el-form-item label="签收日期" prop="receive_time">
                <el-date-picker v-model="model.receive_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable> </el-date-picker>
            </el-form-item>
            <el-form-item label="截止日期" prop="last_time">
                <el-date-picker v-model="model.last_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable> </el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="remarks" style="width: 100%;">
                <el-input type="textarea" :rows="2" v-model.trim="model.remarks" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="异常备注" prop="remark_exception" style="width: 100%;" v-if="isEdit">
                <el-input type="textarea" :rows="2" v-model.trim="model.remark_exception" placeholder="请输入" clearable size="small" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { editCooperateOrder, addCooperateOrder, getExpert, getShop } from '@/api/expert'
import { COOPERATION_STATUS, PLATFORM_TYPE, COOPERATION_TYPE, LOGISTICS_STATUS, IS_TIMEOUT } from '../../constant'
export default {
    name: 'DetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            model: {
                id: '',
                expert_name: undefined,
                email: undefined,
                kol_family_name: undefined,
                kol_phone: undefined,
                platform: undefined,
                country: undefined,
                address: undefined,
                province: undefined,
                city: undefined,
                post_code: undefined,
                link: undefined,
                quotation: undefined,
                fan: undefined,
                remarks: undefined,
                fb_admin_id: undefined,
                is_cooperate: undefined,
                type: undefined,
            },
            rules: {
                // expert_name: [{ required: true, message: '达人姓名不能为空', trigger: ['blur', 'change'] }],
                // order_id: [{ required: true, message: '订单号不能为空', trigger: ['blur', 'change'] }],
                // kol_phone: [{ required: true, message: '达人电话不能为空', trigger: ['blur', 'change'] }],
            },
            COOPERATION_STATUS, // 合作状态
            PLATFORM_TYPE, // 平台
            COOPERATION_TYPE, // 合作方式
            LOGISTICS_STATUS, // 物流状态
            IS_TIMEOUT, // 是否超时
            expertList: [],
            shopList: [],
        }
    },
    computed: {
        isEdit() {
            return !!this.model.id
        },
        title() {
            return `${this.isEdit ? '编辑' : '新增'}达人订单`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.model = Object.assign({}, this.model, val)
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async created() {
        try {
            const [expertData, shopData] = await Promise.all([getExpert(), getShop()])
            this.expertList = expertData?.data ?? []
            this.shopList = shopData?.data ?? []
        } catch (error) {
            console.log(error)
        }
    },
    methods: {
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }

                const params = { ...this.model }
                params.expert_name = this.expertList.find(item => item.expert_id === params.expert_id).expert_name
                // params.expire_time = '2025-07-14'
                if (this.save) {
                    return
                }
                this.save = true
                if (this.isEdit) {
                    editCooperateOrder(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                } else {
                    addCooperateOrder(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                }
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.expert-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.expert-class.el-form .el-form-item .el-input {
    width: 240px;
}
.expert-class.el-form .el-form-item .el-textarea {
    width: 590px;
}
</style>
